<template>
  <!-- 搜索框 -->
  <van-search
    shape="round"
    v-model="value"
    placeholder="请输入搜索关键词" @search="onSearch"
    @cancel="onCancel" >
  </van-search>

  <!-- 轮播图 -->
  <home-swiper></home-swiper>

  <!-- 功能按钮区 -->
  <home-grid></home-grid>

  <!-- 商品信息展示区 -->
  <home-product></home-product>

  <!-- 每周上新 -->
  <home-new></home-new>

  <!-- 人气推荐 -->
  <home-top></home-top>
</template>
  
<script setup>
// 引入轮播图组件
import HomeSwiper from '../components/HomeSwiper.vue'
// 引入功能按钮区组件
import HomeGrid from '../components/HomeGrid.vue'
// 引入商品信息展示区组件
import HomeProduct from '../components/HomeProduct.vue'
// 引入每周上新组件
import HomeNew from '../components/HomeNew.vue'
// 引入人气推荐组件
import HomeTop from '../components/HomeTop.vue'
// 引入ref函数
import { ref } from 'vue'
// 引入vant的showToast函数
import { showToast } from 'vant'
  
// 定义搜索框的值
const value = ref('')
// 定义搜索框的搜索事件
const onSearch = val=> showToast(val)
// 定义搜索框的取消事件
const onCancel = () => showToast('取消')
</script>